import React from "react";
import request from '../../../utils/request';
import { Button, Checkbox, Form, Input,Row,Col } from 'antd';
import { useNavigate, Link } from "react-router-dom";
import "./Reg.less";

function Reg() {
  const navigate = useNavigate()
  const onFinish = (values) => {
    // console.log(values);
    request.post('user/reg', {
      username: values.username,
      password: values.password
    }).then(function ({ data }) {
      console.log(data)
      if (data.code === 200) {
        navigate('/index/mine/login')
      }
    })
  };
  return (
    <>
      <Form style={{ marginTop: 20, width: 550, height: 178,backgroundColor:'#fff' }}
        name="basic"
        labelCol={{ span: 6, }}
        wrapperCol={{ span: 14 }}
        initialValues={{ remember: true, }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <div style={{ paddingTop: '20px' }}>
          <Form.Item label="用户名" name="username"
            rules={[
              {
                required: true,
                message: '请填写用户名',
              },
              {
                // 自定义校验规则，校验用户名是否被占用（返回一个promise对象）
                validator: (rule, value) => {
                  if (!value) {
                    return Promise.reject()
                  }
                  return new Promise((resolve, reject) => {
                    // 验证用户名是否被注册 /user/check 参数：username
                    request.get('/user/check?username=' + value).then(function ({ data }) {
                      if (data.code === 200) {
                        resolve()
                      } else if (data.code === 400) {
                        reject('用户名已被注册')
                      }
                    })
                  })
                },
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="密码" name="password"
            rules={[
              {
                required: true,
                message: '请填写密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
        </div>
        <Form.Item
          wrapperCol={{
            offset: 12,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" style={{}}>注册</Button>
        </Form.Item>
      </Form>
    </>
  );
}
export default Reg;
